<template>
    <div>
        <better-scroll ref="scroll" class="scroll-t" :bounce="false">
            <van-swipe :autoplay="3000" indicator-color="white" class="h-swipe">
                <van-swipe-item v-for="(image, index) in bannerList" :key="index">
                    <img :src="image.img_url" class="banner-img">
                </van-swipe-item>
            </van-swipe>
            <section>
                <div class="main-box">
                    <ul class="tab-box flex-row ptb10 plr15">
                        <li
                            class="tab-item flex-column"
                            v-for="item in tabIndex"
                            @click="routeGo(item.route,item.title)"
                        >
                            <img class="tab-icon" :src="item.icon">
                            <span>{{item.title}}</span>
                        </li>
                    </ul>
                    <div class="nctice-bar plr15">
                        <h3 class="theme-color">商城头条</h3>
                        <van-swipe
                            :autoplay="3000"
                            vertical
                            class="notice-bar-swipe"
                            :touchable="false"
                            :show-indicators="false"
                        >
                            <van-swipe-item
                                v-for="(item,index) in noticeList"
                                :key="index"
                                @click.native="$router.push({name:'notices-list',query:{id:item.id}})"
                            >{{item.title}}</van-swipe-item>
                        </van-swipe>
                    </div>
                </div>
                <div class="category" v-for="item in categoryList">
                    <div class="category-tab flex-row fs14">
                        <span
                            class="category-tab-title"
                            @click="$router.push({name:'goods-list',query:{c1:item.id}})"
                        >
                            {{item.name}}
                            <van-icon name="arrow" class="category-tab-arrow"/>
                        </span>
                    </div>
                    <div class="category-main">
                        <ul class="top-main flex-row flex-1">
                            <li
                                class="top-item flex-row plr10 ptb10"
                                v-for="(list,attr) in item.data"
                                v-if="attr<4"
                                @click="$router.push({name:'goods-detail',query:{id:list.id}})"
                            >
                                <div class="top-item-l">
                                    <span class="row2">{{list.name}}</span>
                                    <p class="theme-color">¥ {{computePrice(list.price)}}</p>
                                </div>
                                <img class="top-img" :src="list.img" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
        </better-scroll>
    </div>
</template>

<script>
import BetterScroll from "../components/scroll";

export default {
    name: "Home",
    data() {
        return {
            tabIndex: [
                {
                    title: "商品分类",
                    icon: "./img/navsmall.jpg",
                    route: "category"
                },
                {
                    title: "礼包专区",
                    icon: "./img/moneysmall.jpg",
                    route: "gift-list"
                },
                {
                    title: "个人中心",
                    icon: "./img/mansmall.jpg",
                    route: "mine"
                },
                {
                    title: "促销专区",
                    icon: "./img/huismall.jpg",
                    route: "promotion-list"
                }
            ],
            bannerList: [],
            noticeList: [],
            categoryList: []
        };
    },
    components: { BetterScroll },
    created() {
        this.getBannerList();
        this.getAdList();
        this.getCotegoryList();
    },
    methods: {
        //获取轮播图
        getBannerList() {
            this.$store.dispatch(types.GET_BANNER_LIST).then(res => {
                if (res.code !== 0) return;
                this.bannerList = res.data;
            });
        },
        //获取公告列表
        getAdList() {
            this.$store.dispatch(types.GET_AD_LIST).then(res => {
                if (res.code !== 0) return;
                this.noticeList = res.data;
            });
        },
        //获取分类列表
        getCotegoryList() {
            this.$store.dispatch(types.GET_CATEGORY_LIST).then(res => {
                let arr = [];
                if (res.code !== 0) return;
                if (res.data) this.getSerchList(res.data);
                // this.categoryList = res.data
            });
        },
        //获取搜索商品列表
        getSerchList(data) {
            let list = [];
            let count = 0;
            data.forEach((item, index) => {
                this.$store
                    .dispatch(types.SEARCH_GOODS, { c1: item.id })
                    .then(res => {
                        if (res.code !== 0) return;
                        list.push({
                            data: res.data,
                            id: item.id,
                            name: item.name
                        });
                        count++;
                        if (count == data.length) this.categoryList = list;
                    });
            });
        },
        routeGo(route, title) {
            if (title == "投资理财") {
                this.$router.push({ name: route, query: { name: "股权投资" } });
            } else {
                this.$router.push({ name: route });
            }
        }
    }
};
</script>

<style scoped lang="scss">
.h-swipe {
    height: 180px;
}

.main-box {
    background: #fff;
}

.tab-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
}

.nctice-bar {
    display: flex;
    height: 36px;
    border-top: 3px solid #efefef;
    border-bottom: 3px solid #efefef;
    margin-bottom: 5px;
    font-size: 14px;
    h3 {
        display: flex;
        align-items: center;
        width: 70px;
        font-weight: bold;
        height: 100%;
    }
    .notice-bar-swipe {
        flex: 1;
        height: 30px;
        padding-left: 5px;
        line-height: 30px;
    }
}

.classify {
    display: flex;
    background: #fff;
    height: 137px;
    .classify-item {
        width: 33%;
    }
}

.category {
    .category-tab {
        height: 40px;
        justify-content: center;
        background: #eee;
    }
    .category-tab-title {
        display: flex;
        .category-tab-arrow {
            display: inline-flex;
            line-height: 21px;
        }
    }

    .category-main {
        background: #fff;
        .category-top {
            .top-theme,
            .top-main {
                flex: 1;
            }
        }
        .category-bottom {
            padding: 0 5px;
            border-top: 1px solid #efefef;
            &-item {
                flex: 1;
                border-right: 1px solid #efefef;
                padding-bottom: 10px;
            }
            &-item:last-child {
                border-right: 0;
            }
        }
    }
    .top-main {
        flex-wrap: wrap;
        border-left: 1px solid #efefef;
        .top-item {
            height: 100px;
            width: 50%;
            border-bottom: 1px solid #efefef;
            .top-item-l {
                height: 100%;
                width: 50%;
            }
            &:last-child {
                border: 0;
            }
            .top-img {
                width: 50%;
                height: 100%;
            }
            &:first-child {
                border-right: 1px solid #efefef;
            }
            &:nth-child(3) {
                border-right: 1px solid #efefef;
            }
        }
    }
}

.scroll-t {
    bottom: 50px;
}

.banner-img {
    width: 100%;
    height: 4.8rem;
}

.tab-item {
    font-size: 12px;
    span {
        margin-top: 5px;
    }
}
</style>
